<template>
  <div class="issue">
    <!-- 选择器 -->
    <div class="issue-select">
      <div class="issue-select-list">
        <span class="issue-select-list-name">发布平台: </span>
        <el-select v-model="value" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span class="star">*</span>
      </div>
      <div class="issue-select-list">
        <span class="issue-select-list-name">选择店铺: </span>
        <el-select v-model="shopValue" clearable placeholder="请选择店铺">
          <el-option
            v-for="item in shopSelectData"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span class="star">*</span>
      </div>
      <div class="issue-select-list">
        <span class="issue-select-list-name">产品模板: </span>
        <el-select
          v-model="productvalue"
          clearable
          placeholder="请选择产品模板"
        >
          <el-option
            v-for="item in templateData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span class="star">*</span>
      </div>
      <div class="issue-select-list">
        <span class="issue-select-list-name">定价模板: </span>
        <el-select v-model="value" clearable placeholder="请选择定价模板">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span class="star">*</span>
      </div>
      <div class="issue-select-list">
        <span class="issue-select-list-name">选择水印: </span>
        <el-select v-model="value" clearable placeholder="请选择水印模板">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="issue-select-list-checkall">
          <el-checkbox v-model="checked">主图打水印</el-checkbox>
        </div>
      </div>
    </div>
    <!-- 参考预览 -->
    <div class="issue-preview">
      <div class="issue-preview-title">参考预览</div>
      <div class="issue-preview-box">
        <div class="issue-preview-table">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="产品名称"> </el-table-column>
            <el-table-column prop="name">
              <template slot="header" slot-scope="">
                <div class="preview-table-header">
                  <div class="preview-table-header-name">变体预览</div>
                  <div
                    class="preview-table-header-color"
                    @click="onVariantRemit"
                  >
                    指定变体汇出
                  </div>
                </div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.date }}
              </template>
            </el-table-column>
            <el-table-column label="价格预览" align="right">
              <template slot="header" slot-scope="">
                <div class="preview-table-header">
                  <div class="preview-table-header-name">价格预览</div>
                  <div class="preview-table-header-color">快速定价</div>
                </div>
              </template>
              <template slot-scope="scope">
                <!-- <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >Edit</el-button
                > -->
                {{ scope.row.date }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="issue-preview-group">
          <div class="preview-group-list">
            <div class="preview-group-list-name">
              <span>组合形式</span>
              <span>修改</span>
            </div>
            <div class="preview-group-list-content">2个组合商品, 0个单品</div>
          </div>
          <div class="preview-group-list">
            <div class="preview-group-list-name">
              <span>产品模板类目</span>
              <span>修改</span>
            </div>
            <div class="preview-group-list-content">产品类目</div>
          </div>
          <div class="preview-group-list">
            <div class="preview-group-list-name">
              <span>SKU</span>
              <span>修改</span>
            </div>
            <div class="preview-group-list-content">
              母体SKU:大河坎打砂机 <br />
              变体SKU:与母体规则一致 <br />
              简单商品:大家好打瞌睡了
            </div>
          </div>
          <div class="preview-group-list">
            <div class="preview-group-list-name">
              <span>产品标题</span>
              <span>修改</span>
            </div>
            <div class="preview-group-list-content">
              We offer an extensive range of products and never compromise on
              quality
            </div>
          </div>
          <div class="preview-group-list">
            <div class="preview-group-list-name">
              <span>产品描述</span>
              <span>修改</span>
            </div>
            <div class="preview-group-list-content">
              We offer an extensive range of products and never compromise on
              quality. We want to be considered as the best place for shopping
              for these items.1. We try our best to provide accurate descri...
            </div>
          </div>
          <div class="preview-group-list">
            <div class="preview-group-list-name">
              <span>条形码</span>
              <!-- <span>修改</span> -->
            </div>
            <div class="preview-group-list-content">EAN (数量不足)</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 提示 -->
    <div class="issue-attention">
      <div class="issue-attention-title"><span>*</span>注意 :</div>
      <div class="issue-attention-name">
        1.发布到不同店铺自动更新产品图片链接、SKU、EAN/UPC；发布到同个店铺可选择更新
      </div>
      <div class="issue-attention-name">
        2.系统将智能关联颜色、尺寸、并使用系统颜色命名。您可在汇出后，到"汇出记录"下载对应的Excel按需进行调整
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'commonIssue',
  components: {},
  props: {},
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
      ],
      value: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
      ],
      checked: false,
      shopValue: '', // 店铺
      productvalue: '', //产品模板
    };
  },
  computed: {
    // 店铺列表
    shopSelectData() {
      return this.$store.state.product.shopSelectData;
    },
    // 模板列表
    templateData() {
      return this.$store.state.product.templateData;
    },
  },
  watch: {},
  created() {},
  methods: {
    onVariantRemit() {
      this.$emit('onVariantRemit');
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.issue {
  // 选择器
  .issue-select {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .issue-select-list {
      display: flex;
      align-items: center;
      margin-bottom: 24px;

      .issue-select-list-name {
        padding-right: 10px;
        font-weight: 700;
      }

      .star {
        padding-left: 10px;
        color: red;
        font-size: 20px;
      }

      .issue-select-list-checkall {
        padding-left: 12px;
      }
    }
  }
  //参考预览
  .issue-preview {
    .issue-preview-title {
      height: 45px;
      line-height: 45px;
    }
    .issue-preview-box {
      height: 300px;
      overflow-y: auto;

      .issue-preview-table {
        /deep/ .el-table__cell {
          text-align: center;
        }
        // 价格预览
        .preview-table-header {
          display: flex;
          flex-direction: column;
          align-items: center;

          .preview-table-header-color {
            color: #4181ff;
            font-size: 12px;
            cursor: pointer;
          }
        }
      }
      .issue-preview-group {
        padding-top: 24px;

        .preview-group-list {
          display: flex;
          padding: 12px 0;
          border-top: 1px solid #ebebeb;
          border-left: 1px solid #ebebeb;
          border-right: 1px solid #ebebeb;

          .preview-group-list-name {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            span:nth-child(2) {
              // cursor: pointer;
              color: #4181ff;
            }
          }

          .preview-group-list-content {
            flex: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            box-sizing: border-box;
            font-size: 12px;
          }

          &:last-child {
            border-bottom: 1px solid #ebebeb;
          }
        }
      }
    }
  }

  // 提示
  .issue-attention {
    padding-top: 24px;

    .issue-attention-title {
      color: #f00000;
    }
    .issue-attention-name {
      padding-top: 6px;
      font-size: 12px;
    }
  }
}
</style>
